<template>
    <div class="home card">
      <div class="top">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="主诊团队">
            <el-select v-model="zztdvalue" placeholder="Select" size="large" style="width: 240px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="患者">
            <el-input v-model="formInline.user" placeholder="" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
          </el-form-item>
  
          <el-form-item>
            <el-button type="primary" @click="addbutton">新入患者</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="contentbox">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="近100天随访" name="1">
            <div class="table-box">
              <el-table :data="datalist" border style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="date" label="Date" width="180" show-overflow-tooltip />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column label="address">
                  <template #default="scope">{{ scope.row.address }}</template>
                </el-table-column>
              </el-table>
              <div class="fybox">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                  :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager" :total="400"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="近30天漏诊" name="2">
            <div class="table-box">
              <el-table :data="datalist" style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
              </el-table>
              <div class="fybox">
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                  :page-sizes="[10, 50, 100, 200]" layout="total, sizes, prev, pager" :total="400"
                  @size-change="handleSizeChange" @current-change="handleCurrentChange" />
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </template>
  
  <script setup name="home">
  import { ref, reactive } from "vue";
  import { Delete, EditPen, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
  const activeName = ref("1");
  const handleClick = tab => {
    console.log(activeName.value);
  };
  let datalist = ref([
    {
      date: "2016-05-03",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "2016-05-02",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "2016-05-04",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    },
    {
      date: "2016-05-01",
      name: "Tom",
      address: "No. 189, Grove St, Los Angeles"
    }
  ]);
  const zztdvalue = ref('')
  const options = [
    {
      value: 'Option1',
      label: 'Option1',
    },
    {
      value: 'Option2',
      label: 'Option2',
    },
    {
      value: 'Option3',
      label: 'Option3',
    },
    {
      value: 'Option4',
      label: 'Option4',
    },
    {
      value: 'Option5',
      label: 'Option5',
    },
  ]
  const formInline = reactive({
    user: '',
    region: '',
    date: '',
  })
  let currentPage = ref(1)
  let pageSize = ref(10)
  
  const onSubmit = () => {
    console.log('submit!')
  }
  let addbutton = () => { }
  
  let handleSizeChange = () => {
  }
  let handleCurrentChange = () => {
  }
  </script>
  
  <style scoped lang="scss">
  .home {
    width: 100%;
    height: 100%;
  
    .contentbox {
      width: 100%;
      height: 300px;
    }
  
    .szbox {
      justify-content: end;
      display: flex;
    }
  }
  
  .card {
    padding: 25px;
  }
  </style>
  